// ===首页样式===

// 引入全站通用重置样式
@import '../../../common/less/reset.less';
// 前台www站点公共头脚
@import '../../common/less/header.less';
@import '../../common/less/footer.less';
// 邓元翔的模块封装库
@import '../../../common/less/deng_module.less';
// fullPage.js插件的菜单样式修改
@import '../common/less/fullPageDIY.less';

// 宋体
@SimSun :"\5B8B\4F53";
// 微软雅黑
@YaHei : "\5FAE\8F6F\96C5\9ED1", @SimSun;

.f-ft-yh{
    font-family: @YaHei;
}
.f-cl-wt{
    color: white;
}

// 起伏动画
.create_updown(@icon_name: icon_1;@icon_w: 56px;@shadow_name: shadow;){
    width: @icon_w;
    img{
        display: block;
        .block_center;
        .animation(@icon_name 1s linear 1s alternate none infinite running);
        // 动画-起伏规则
        .animat_fluctuate(@icon_name);
    }
    .u-shadow{
        @_w: ceil(@icon_w / 2);
        @_h: ceil(@_w / 5);
        @_s_w: ceil(@_w / 2);
        @_s_h: ceil(@_h / 2);
        // 椭圆：宽，高，颜色
        .ellipse(@_w, @_h, #000);
        .block_center;
        margin-top: 18px;
        .animation(@shadow_name 1s linear 1s alternate none infinite running);
        .animat_shadow(@shadow_name, @_s_w, @_s_h, 2.5);
    }
}

body{
    background-color: #0D7FE0;
}
/*头部导航*/
.g-hd{
    .f-pf;
}
/*脚部导航*/
.g-ft{
    position: absolute;
    bottom: 0;
    z-index: 1;
}
.g-ct{
    width: 100%;
}

.section{
    height: 100%;
}
.m-page1,.m-page2,.m-page3,.m-page4,.m-page5,.m-page6,.m-page7 {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

/*隐藏剩下页面，用js显示*/
.m-page2,.m-page2-ft,.m-page3,.m-page3-ft,.m-page4,.m-page4-bg,.m-page5,.m-page6,.m-page7{
    display: none;
}

/*雪碧图*/
.m-page1 .m-3man,.m-lst-bg,.m-page1 li,.m-page1 .u-qq,.m-page1 .u-mail{
    background: url(../img/business/page1.png) no-repeat;
}
.m-page4-bg,.m-page4 .m-canvas,.fp-prev,.fp-next{
    background: url(../img/business/page4.png) no-repeat;
}
.m-page5 i{
    background: url(../img/business/page5.png) no-repeat;
}
.m-page6 .prev i,.m-page6 .next i{
    background: url(../img/business/page6-btn.png) no-repeat;
}


/*屏幕1*/
.m-page1{
//  top: 15%;
    
    /*左边的标题和3个人*/
    .m-lft{
        position: absolute;
        top: 20%;
        .m-tt{
            height: 141px;
            z-index: 1
        }
        h2{
            .inline_block;
            padding-left: 12px;
        }
        .u-tt2{
            display: block;
            padding-left: 111px;
        }
        img,h2{
            vertical-align: middle;
        }
        
        h2,.u-tt2{
            color: white;
        }
        h2{
            font: 200 92px @YaHei;
        }
        .u-tt2{
            font: normal 32px @YaHei;
        }
        
        .m-3man{
            width: 698px;
            height: 694px;
            background-position: 0 0;
            position: absolute;
            top: 50%;
            left: -80px;
        }
    }
    
    
    .m-lst{
        @li_h: 76px;
        width: 355px;
        height: 310px;
        position: absolute;
        right: 12px;
        top: 26%;
        
        ul{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0%;
        }
        
        li{
            height: @li_h;
            margin-bottom: 8px;
            background-position: -335px -699px;
            text-align: center;
            position: relative;
        }
        
        a{
            color: white;
            font: normal 18px @YaHei;
            display: block;
            width: 100%;
            height: 100%;
            line-height: @li_h + 8;
        }
    }
    
    .m-lst-bg{
        background-position: 0 -699px;
        width: 330px;
        height: 100%;
        .block_center;
    }
        
    .m-qq,.m-mail{
        span{
           margin-left: 63px;
       }
    }
    .m-mail{
        @li_h: 76px;
        span{
            color: white;
            font: normal 18px @YaHei;
            display: block;
            line-height: @li_h + 8;
        }
    }
    .m-qq{
       margin-top: 28px; 
    }
    .m-lst .m-online{
        height: 91px;
        background-position: -335px -775px;
    }
    
    .u-qq{
        width: 32px;
        height: 33px;
        background-position: -335px -871px;
        position: absolute;
        top: 25px;
        left: 120px;
    }
    
    .u-mail{
        width: 41px;
        height: 25px;
        background-position: -335px -908px;
        position: absolute;
        top: 30px;
        left: 72px;
    }
    
    
    
    .m-c1{
        .create_circle(72px,#fff,1.2s);
        top: 18%;
        left: 500px;
    }

    .m-c2{
        .create_circle(47px,#fff,2s);
        top: 38%;
        left: 36px;
    }
    
    .m-c3{
        .create_circle(60px,#fff,1.5s);
        top: 40%;
        left: 302px;
    }
    
    .m-c4{
        .create_circle(40px,#fff,1.7s);
        top: 70%;
        right: 310px;
    }
    
}

.m-page2,.m-page3,.m-page4,.m-page5,.m-page6,.m-page7{
    z-index: 1;
    
    h3{
        font: normal 36px @YaHei;
        text-align: center;
        padding-top: 11%;
    }
}
.m-page2,.m-page3{
    
    /*平台介绍*/
    .m-about{
        width: 468px;
        color: white;
        position: absolute;
        top: 18%;
//      right: 0px;
//      right: -700px;
//      .opacity(0);

        strong{
            font: normal 21px @YaHei;
        }
        p{
            font: normal 18px/2 @YaHei;
            text-indent:2em;
            padding-top: 30px;
        }

        strong,em{
            color: #ffe94e;
        }
        em{
            font-weight: normal;
        }
    }
}

/*屏幕2*/
.m-page2{
    
    /*平台介绍图片容器*/
    .m-pic{
//      width: 50%;
        height: 100%;
        float: left;
    }
    .m-about{
        padding: 100px 6px 0 84px;
//      float: right;
//      top: 18%;
//      right: 0px;
        right: -700px;
        .opacity(0);
    }
    
    /*一个人图片*/
    .u-man{
        width: 135px;
        height: 190px;
        background: url(../img/business/page2-man.png) no-repeat;
        position: absolute;
        top: 30%;
        left:185px
    }
    
    /*起伏的图标们*/
   .m-icon1,.m-icon2,.m-icon3{
       position: absolute;
   }
    .m-icon1{
        .create_updown(icon1,56px,shadow1);
        top: 50%;
        left: 345px;
    }
    .m-icon2{
        .create_updown(icon2,42px,shadow2);
        top: 40%;
        left: 90px;
        
    }
    .m-icon3{
        .create_updown(icon3,33px,shadow3);
        top: 30%;
        left: 345px;
    }
    
    
}

.m-page2-ft,.m-page3-ft,.m-page5-ft1,.m-page5-ft2{
    width: 100%;
    .block_center;
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0;
}

/*平台介绍脚部*/
.m-page2-ft{
    height: 161px;
    background: url(../img/business/page2-bg.png) repeat -230px 0;
}

.m-page3{
    
    .m-pic{
        width: 50%;
        height: 100%;
        float: right;
    }
    
    .m-about{
        padding: 17% 0 0 23px;
        top: 18%;
        left: -710px;
        .opacity(0);
    }
    
    /*一个人图片*/
    .u-man{
        width: 323px;
        height: 381px;
        background: url(../img/business/page3-man.png) no-repeat;
        margin: 25px 0 0 55px;
    }
}

/*产品介绍脚部*/
.m-page3-ft{
    height: 90px;
    background: url(../img/business/page3-bg.png) repeat;
}

/*屏幕4背景*/
.m-page4-bg{
    width: 1152px;
    height: 544px;
    background-position: 0 0;
    .center();
}

.m-page4{

    strong{
        font: normal 21px @YaHei;
        color: #de5930;
        display: block;
        text-align: center;
        padding: 64px 0;
    }
    p{
        width: 667px;
        font: normal 21px @YaHei;
        color: #453530;
        text-indent:2em;
        .block_center;
    }
    .m-canvas{
        width: 762px;
        height: 300px;
        .block_center;
        margin-top: -250px;
        background-position: 0 -554px;
    }
    
    /*屏幕4-切换按钮*/
    .fp-prev,.fp-next{
        border: 0;
        width: 60px;
        height: 60px;
    }
    .fp-prev{
        background-position: -767px -554px;
    }
    .fp-next{
        background-position: -827px -554px;
    }
}

.m-page5{
    width: 1007px;
    overflow: hidden;
    
    .m-ct{
        margin: 32px 0;
    }
    
    li{
        width: 126px;
        font: normal 12px @YaHei;
        color: white;
        float: left;
        text-align: center;
    }
    i{
        .block_center;
        margin-bottom: 7px;
    }
    span{
        line-height: 2em;
        
    }
    em{
        font-weight: normal;
        font-size: 14px;
    }
    .u-root{
        @_w: 65px;
        font-size: 18px;
        width: 82px;
        height: @_w;
        line-height: @_w;
        background-position: 0 -204px;
        
    }
    .u-icon{
        @_w_h: 101px;
        width: @_w_h;
        height: @_w_h;
//      background-position: 0 -811px;
    }
    .u-icon1{
        background-position: 0 0;
    }
    .u-icon2{
        background-position: -102px 0;
    }
    .u-icon3{
        background-position: -204px 0;
    }
    .u-icon4{
        background-position: -306px 0;
    }
    .u-icon5{
        background-position: 0 -102px;
    }
    .u-icon6{
        background-position: -102px -102px;
    }
    .u-icon7{
        background-position: -204px -102px;
    }
    .u-icon8{
        background-position: -306px -102px;
    }
    /*箭头-右*/
    .u-line-r{
        width: 95px;
        height: 11px;
        .block_center;
        margin-top: 45px;
        background-position: -32px -275px;
    }
    .m-start{
        margin: 20px 42px 0 0;
    }
    .m-end{
        margin-left: 80px;
    }
    /*箭头-上*/
    .u-line-top{
        width: 11px;
        height: 95px;
        .block_center;
        background-position: -16px -274px;
    }
    /*箭头-下*/
    .u-line-btm{
        width: 11px;
        height: 95px;
        .block_center;
        background-position: 0 -274px;
    }
    /*箭头-右上*/
    .u-line-toprt{
        width: 113px;
        height: 113px;
        .block_center;
        background-position: -32px -285px;
    }
    .m-line-box{
        
            height: 140px;
        li{
            position: relative;
        }
        
        .u-line1,.u-line2,.u-line3,.u-line4{
            position: absolute;
            top: 22px;
        }
        .u-line1{
            left: 475px;
        }
        .u-line2{
            left: 725px;
        }
        .u-line3{
            left: 775px;
        }
        .u-line4{
            left: 930px;
        }
    }
}

/*平台介绍脚部*/
.m-page5-ft1,.m-page5-ft2{
    height: 134px;
}
.m-page5-ft1{
    background: url(../img/business/page5-wave1.png);
    /*起伏动画*/
    .animation(up_down1 1.5s linear .5s alternate none infinite running);
    .animat_fluctuate(up_down1);
}
.m-page5-ft2{
    background: url(../img/business/page5-wave2.png);
    /*起伏动画*/
    .animation(up_down2 1.5s linear 2s alternate none infinite running);
    .animat_fluctuate(up_down2);
}

/*屏幕6*/
.m-page6-bg{
    background: url(../img/business/page6-bg.png) repeat;
}
.m-page6{
    h3{
        color: #505050;
    }
    /*合作伙伴*/
    .m-partner{
        margin: 32px 0;
        
        li{
            width: 225px;
            height: 85px;
            line-height: 85px;
            border: 1px solid #e2e2e2;
            background-color: white;
            display: inline;
            float: left;
            position: relative;
            margin-bottom: 32px;
            text-align: center;
        }
        a{
            cursor: default;
        }
        img{
            vertical-align: middle;
        }
        .f-marg-w{
            margin: 0 159px;
        }
    }
    .m-applst{
        width: 100%;
        position: relative;
        overflow: hidden;
        
        @_li_h: 118px;
        ul{
            width: 100%;
            height: @_li_h + 2;
            padding: 0 60px;
            .block_center;
//          overflow: hidden;
        }
        li{
            width: 175px;
            height: @_li_h;
            border-bottom: 1px solid #e2e2e2;
            border-top: 1px solid #e2e2e2;
            border-right: 1px solid #e2e2e2;
            background-color: white;
            float: left;
            position: relative;
        }
        p{
            width: 100%;
            height: 90px;
            text-align: center;
            .center();
//          margin: auto;
        }
        img{
            margin-bottom: 4px;
        }
        span{
            display: block;
            
        }
        .prev,.next{
            display: block;
            height: @_li_h;
            width: 59px;
            background-color: white;
            border: 1px solid #e2e2e2;
            position: absolute;
            top: 0;
            
            i{
                width: 14px;
                height: 40px;
                position: absolute;
                top: 50%;left: 50%;
                margin: -20px 0 0 -7px;
            }
        }
        .prev{
            i{
                background-position: 0 0;
            }
        }
        .next{
            border-left: 0;
            right: 0;
            i{
                background-position: -14px 0;
            }
        }
    }
}

/*屏幕7*/
.m-page7{
    height: 582px;
    
    h3{
        margin-bottom: 32px;
    }
    
    .m-fm{
        @_span_w: 76px;
        width: 702px;
        .block_center;
        position: relative;
        
        span,input{
            font-family: @YaHei;
        }
        
        li{
            width: 50%;
            float: left;
            font-size: 0;
        }
        span{
            color: white;
            font-size: 14px;
            .inline_block;
            width: @_span_w;
            text-align: right;
        }
        
        input{
            width: 212px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 25px;
        }
        input[type=text]{
            font-size: 16px;
            border: 1px solid white;
            padding: 0 14px; 
            
            &:focus{
                border-radius: 2px;
                border: 1px solid #f27224;
            }
        }
        
        .m-vcode,.m-btn{
            width: 100%;
        }
        .m-vcode{
            
            a{
                margin-left: 30px;
                display: inline;
            }
            img{
                vertical-align: top;
                width: 180px;
                height: 50px;
            }
        }
        .m-btn{
            padding-left: @_span_w;
            position: relative;
            
            input{
                background-color: #999;
                color: white;
                font-size: 18px;
                width: 240px;
                height: 40px;
            }
        }
        .z-true{
            input{
                background-color: #f77d1b;
                cursor: pointer;
                
                &:hover{
                    background-color: #F98529;
                }
            }
        }
        /*插件错误提示框*/
        .u-tips{
            border: 1px solid red;
            background-color: #fff;
            font-size:14px;
            color: red;
            padding: 3px;
            display: none;
            position: absolute;
            left: 347px;
            top: 12px;
        }
    }
    
    .m-blackboard{
        position: absolute;
        right: 10px;
        top: 60%;
    }
}

/*IE兼容样式*/
.ie7,.ie8,.ie9{
    .m-page1{
         .m-c1,.m-c2,.m-c3,.m-c4{
             .u-c1,.u-c2,.u-c3{
                 display: none;
             }
         }
         .m-c1{
             background: url(../img/business/page1-circle72.png) no-repeat;
         }
         .m-c2{
             background: url(../img/business/page1-circle47.png) no-repeat;
         }
         .m-c3{
             background: url(../img/business/page1-circle60.png) no-repeat;
         }
         .m-c4{
             background: url(../img/business/page1-circle40.png) no-repeat;
         }
    }
}

.ie7{
    .m-page4 .m-canvas{
        margin-top: 100px;
    }
    .m-page5{
        .u-line2{
            left: 600px;
        }
        .u-line3{
            left: 525px;
        }
        .u-line4{
            left: 555px;
        }
    }
    .m-page6{
        .m-applst{
            p{
                position: relative;
            }
        }
    } 
}
